<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <AreaSelector></AreaSelector>

      <el-button type="primary" :icon="Plus" @click='showAddApartment'>新增公寓</el-button>

      <el-table :data="apartmentList" border stripe style="margin: 20px 0;">
        <el-table-column label="名称" align="center" prop="name"></el-table-column>
        <el-table-column label="详细地址" align="center" prop="addressDetail"></el-table-column>
        <el-table-column label="空闲房间数" align="center" prop="freeRoomCount"></el-table-column>
        <el-table-column label="房间总数" align="center" prop="totalRoomCount"></el-table-column>
        <el-table-column label="所属省份" align="center" prop="provinceName"></el-table-column>
        <el-table-column label="所属城市" align="center" prop="cityName"></el-table-column>
        <el-table-column label="所属区域" align="center" prop="districtName"></el-table-column>
        <el-table-column label="联系方式" align="center" prop="phone"></el-table-column>
        <el-table-column label="入住状态" align="center">
          <template v-slot="{ row, $index }">
            <el-tag type="success" v-if="row.freeRoomCount > 0">可入住</el-tag>
            <el-tag type="success" v-else>已满员</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布状态" align="center">
          <template v-slot="{ row, $index }">
            <el-switch v-model="row.isRelease" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template v-slot="{ row, $index }">
            <el-button type="warning" :icon="Edit" @click="showUpdateApartment(row)">修改</el-button>
            <el-button type="danger" :icon="Delete" @click="deleteApartmentById(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[2, 4, 6, 8]"
        layout="prev, pager, next, jumper,->,sizes,total" :total="total" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" />

    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: '', //组件名称
})
</script>
<script lang="ts" setup>
import { ref, onMounted, watch } from "vue"
import { Plus, Edit, Delete } from "@element-plus/icons-vue"
import apartmentApi, { ApartmentData, PageQueryParamData } from '@/api/apartment'
import { useAreaSelectorStore } from "@/store/modules/model/areaSelectorModel"
import { storeToRefs } from "pinia"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from "vue-router"
let router = useRouter()
let areaSelectorStore = useAreaSelectorStore()
let {provinceId, cityId, districtId} = storeToRefs(areaSelectorStore)
//声明表格数据
let apartmentList = ref<ApartmentData[]>([])
//当前页的页码
const page = ref(1)
//每页显示的条数
const limit = ref(2)
//总条数
const total = ref(0)
let getApartmentPage = async ()=>{
  let queryParam : PageQueryParamData = {
    current:page.value,
    size:limit.value,
    provinceId:provinceId.value,
    cityId:cityId.value,
    districtId:districtId.value
  }
  let {data} = await apartmentApi.getApartmentPage(queryParam);
  total.value = data.total
  apartmentList.value = data.records.map(item=>{
    item.isRelease = item.isRelease === 1 ? true : false;
    return item;
  })
}

onMounted(()=>{
  areaSelectorStore.$reset()
})

/* //页面初始化时获取公寓的分页信息
onMounted(()=>{
  getApartmentPage();
})
//监听区域id，若选择了区域则重新查询公寓的分页信息
watch(districtId, ()=>{
  getApartmentPage();
}) */
//深度监视区域id，当页面初始化时或者选择了区域则获取公寓的分页信息
watch(districtId, () => {
  getApartmentPage()
}, { immediate: true })

//处理当前页的页码发生变化时触发的函数
let handleCurrentChange = (newPage : number)=>{
  //newPage发生变化后的页码
  page.value = newPage;
  getApartmentPage()
}
//处理每页显示的条数发生变化时触发的函数
let handleSizeChange = (newSize : number)=>{
  //newSize发生变化后的每页显示的条数
  limit.value = newSize;
  page.value = 1;
  getApartmentPage()
}
//处理删除功能的函数
let deleteApartmentById = async (row : ApartmentData)=>{
  ElMessageBox.confirm(
    `你确定要删除${row.name}吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await apartmentApi.deleteApartmentById(row.id as number)
    ElMessage.success("删除成功")
    getApartmentPage()
  })
}
//处理添加功能的函数
let showAddApartment = ()=>{
  router.push("/apartmentManagement/apartmentManagement/addOrEditApartment")
}
//处理修改功能的函数
let showUpdateApartment = (row : ApartmentData)=>{
  router.push(`/apartmentManagement/apartmentManagement/addOrEditApartment?apartmentId=${row.id}`)
}
</script>